<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" :title="title?title:'同步素材测试'" top="8vh" :visible.sync="dialogVisible" @close="resetForm()" width="800px">
        <div class="free_box flexbox">
            <div class="free_left flex">
                <div class="free_title">同步测试项目</div>
                <div class="free_text flexbox flexcenter flexbetween">
                    项目列表
                    <el-input size="small" placeholder="请输入名称、ID查询" style="width:240px" suffix-icon="el-icon-search" @change="searchData" clearable v-model="queryInfo.query">
                    </el-input>
                </div>
                <div class="video_list" v-infinite-scroll="load" :infinite-scroll-disabled="isload">
                    <template v-if="userList.length>0">
                        <div class="video_item flexbox flexcenter" v-for="item in userList" :key="item.id">
                            <el-checkbox v-model="item.checked" class="video_check" @change="selectUser(item)"></el-checkbox>
                            <div class="video_right">
                                <div class="video_name">{{item.name}}</div>
                            </div>
                        </div>
                    </template>
                    <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:100%">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">请先选择账户</div>
                    </div>
                </div>
            </div>
            <div class="free_right flex">
                <div class="free_title">已同步测试项目</div>
                <div class="has_video">
                    <template v-if="hasList.length>0">
                        <div class="has_item flexbox flexcenter" v-for="(item,index) in hasList" :key="item.video_id">
                            <div class="has_left flex">
                                <div class="video_name">{{item.name}}</div>
                            </div>
                            <svg class="has_close" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click="deleteUser(item)">
                                <path d="M8.28772 8.2876L15.7123 15.7122" stroke="#B4B7BD" stroke-width="1.5" stroke-linecap="round" />
                                <path d="M8.28772 15.7122L15.7123 8.28754" stroke="#B4B7BD" stroke-width="1.5" stroke-linecap="round" />
                            </svg>
                        </div>
                    </template>
                    <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:100%">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂未添加账户</div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" class="el-button-width">确 认</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            queryInfo: {
                query: "",
                page: 1,
                limit: 20,
            },
            subForm:{
                qid:null,
                pid:[],
            },
            hasList: [],
            userList: [],
        };
    },
    created() {
        
    },
    methods: {
        getData(id){
            this.dialogVisible = true
            this.subForm.qid = id
            this.getUserList()
        },
        //获取账号
        async getUserList() {
            this.loading = true;
            this.isload = true
            const { data: res } = await this.$http.post(
                "videotest/Probject/proList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                if(res.data.list.length<=0){
                    this.isload = true
                }else{
                    this.isload = false
                }
                this.loading = false;
                let list = res.data.list.map((item) => {
                    item.checked = false;
                    return item;
                });
                for (let i in list) {
                    for (let a in this.hasList) {
                        if (list[i].id == this.hasList[a].id) {
                            list[i].checked = true;
                        }
                    }
                }
                this.userList = this.userList.concat(list);
            }
        },

        // 搜索
        searchData(){
            this.queryInfo.page = 1
            this.userList = []
            this.getUserList();
        },


        // // 下拉加载更多
        load() {
            this.queryInfo.page += 1
            this.getUserList();
        },

        // 选择
        selectUser(item) {
            if (item.checked == true) {
                this.hasList.push(item);
            } else {
                let index = this.hasList.findIndex(
                    (val) => val.id == item.id
                );
                this.hasList.splice(index, 1);
            }
        },

        // 删除
        deleteUser(item, index) {
            this.hasList.splice(index, 1);
            let index2 = this.userList.findIndex(
                (val) => val.id == item.id
            );
            if (index2 != -1) {
                this.userList[index2].checked = false;
            }
        },

        // 筛选
        filteredData(list) {
            var list = list,
                query = this.searchValue;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name) {
                    if (
                        item.name.indexOf(query) !== -1 ||
                        item.advertiser_id == query
                    ) {
                        return item;
                    }
                }
            });
            return list;
        },
        //保存
        async submitForm() {
            if(this.hasList.length<=0){
                this.$message.error("请选择项目");
                return;
            }
            this.subForm.pid = this.hasList.map(item=>{return item.id})
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/createPlanModel",
                this.subForm
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.loading = false;
                this.resetForm();
            }
        },

        resetForm() {
            this.hasList = []
            this.userList = []
            this.queryInfo.page = 1
            this.queryInfo.query = ""
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.free_box {
    margin: -20px -20px -10px -20px;
    position: relative;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
}
.model_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    margin-top: 20px;
    padding: 0 20px;
}
.model_name {
    padding: 12px 20px 20px 20px;
}
.free_box::after {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 1px solid #ebebeb;
    left: 50%;
    top: 0;
}
.free_title {
    height: 61px;
    line-height: 61px;
    padding: 0 20px;
    font-size: 16px;
    color: #17233d;
    border-bottom: 1px solid #ebebeb;
}
.free_text {
    margin: 24px 20px 10px;
    font-size: 14px;
    color: #17233d;
}
.video_list {
    height: 450px;
    overflow: auto;
    padding-left: 20px;
    padding-right: 12px;
}
.video_item {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 0 20px;
    height: 64px;
    margin-bottom: 12px;
}
.video_right {
    margin-left: 12px;
}
.video_check {
    flex-shrink: 0;
}
.video_name {
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
    height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.video_id {
    font-size: 13px;
    line-height: 18px;
    color: #b4b7bd;
    margin-top: 8px;
}
.has_video {
    padding: 20px 20px 0;
    overflow: auto;
    height: 500px;
}
.has_item {
    padding:0 12px;
    height: 64px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-bottom: 12px;
}
.has_left {
    margin-right: 12px;
}
.has_close {
    cursor: pointer;
}
.catch_type {
    padding: 0 20px;
    margin-top: 12px;
}
.time_type_item {
    width: 174px;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    color: #17233d;
}
.time_type_item.active {
    color: #4475ff;
    border-color: #4475ff;
    background-color: rgba(68, 117, 255, 0.05);
}
.time_type_text {
    margin-left: 10px;
}
.query_input {
    margin: 0 20px 20px;
}
.type_text {
    font-size: 12px;
    margin-left: 10px;
}
.type_text.green {
    color: #67c23a;
    background-color: #dff9de;
    padding: 0 5px;
    border-radius: 3px;
}
.type_text.blue {
    color: #4475ff;
    background-color: #ebf0ff;
    padding: 0 5px;
    border-radius: 3px;
}
</style>
